<template>
  <div id="videoContainer">
    <!-- top -->
    <Panel v-if="currentShow" class="top">
      <!-- title -->
      <div class="w-full h-full mt-2">
        <div class="title-top">
          <div>直播</div>
          <div class="mr-[10px]">{{ topInfo.name }}</div>
        </div>
        <!-- 视频 -->
        <iframe :src="topInfo.src" frameborder="0" style="width: 100%; height: 100%"></iframe>
      </div>
    </Panel>
    <!-- 应答界面 -->
    <div v-show="!currentShow" class="top-call"></div>
    <!-- bottom -->
    <div class="bottom">
      <div
        v-if="currentList.length == 0"
        style="
          width: 100%;
          line-height: 240px;
          font-size: 30px;
          text-align: center;
          color: #ccccccb0;
        "
      >
        暂无数据
      </div>
      <div v-else class="listBox">
        <Panel
          v-for="(item, index) in currentList"
          :key="index"
          class="relative"
          style="width: 475px; height: 100%; background-color: rgba(0, 0, 0, 0.3); flex-shrink: 0"
        >
          <div class="w-full h-full mt-2">
            <div class="title-bottom">
              <div>{{ item.name }}</div>
              <div>{{ item.mc }}</div>
            </div>
            <div v-if="item.name == '直播'" class="w-full h-full">
              <iframe :src="item.dmtDz" frameborder="0" class="rightBox w-full h-full"></iframe>
            </div>
            <div v-if="item.name == '图片'" class="w-full h-full">
              <img :src="item.dmtDz" alt="" style="object-fit: contain" />
            </div>
            <div v-if="item.name == '视频'" class="w-full h-full">
              <video :src="item.dmtDz" class="w-full" width="100%" height="100%" />
            </div>
          </div>
        </Panel>
      </div>
    </div>

    <div class="pop-line" style="margin-top: 30px"></div>

    <div class="shortVideos">
      <div class="processBox">
        <!-- <div class="callBox" @click="handleCall"> -->
        <!-- </div> -->
        <div
          v-for="(item, index) in processList"
          :key="index"
          class="processList"
          :class="{ activeImg: currentImgId == item.id }"
          @click="chooseList(item)"
        >
          <div v-if="item.name == '直播'" class="w-full h-full flex flex-row-reverse items-center">
            <iframe :src="item.dmtDz" frameborder="0" class="rightBox w-full h-full"></iframe>
            <div class="title">{{ item.name }}</div>
          </div>
          <div v-if="item.name == '图片'" class="flex flex-row-reverse items-center">
            <img :src="item.dmtDz" alt="" />
            <div class="title">{{ item.name }}</div>
          </div>
          <div v-if="item.name == '视频'" class="w-full h-full flex flex-row-reverse items-center">
            <video :src="item.dmtDz" class="w-full" width="100%" height="100%" />
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryJkspInfoList, queryDmtInfo } from '@/service'
import { useBusinessStore } from '@/store'
const store = useBusinessStore()
// 顶部直播数据
const topInfo: any = ref({
  src: '',
  name: '',
})
const processList: any = ref([])
// 点击应答切换顶部box属性
const currentShow = ref(true)
// 中间展示列表
const currentList: any = ref([])
const allList: any = ref({})
const currentImgId = ref(0)

const getList = (id: string) => {
  queryJkspInfoList({ jqId: id }).then((res: any) => {
    topInfo.value.src = res[0]?.zfLdz
    topInfo.value.name = res[0]?.mc
  })
  queryDmtInfo({ jqId: id }).then((res: any) => {
    // 如果有直播就push给底部list，并赋值给中间部分list
    if (res.sxj.length > 0) {
      const lLive = res.sxj.map((item: any) => {
        return {
          ...item,
          name: '直播',
          dmtDz: item?.zfLdz,
        }
      })
      processList.value.push(lLive[0])
      allList.value.sxjList = res.sxj
      // 默认展示直播

      currentList.value = [...lLive, ...new Array(2).fill({})].slice(0, 2)
    }
    // 如果有 0图片或 1视频 就push给底部list，并赋值给中间部分list
    if (res.dmt['0'] || res.dmt['1']) {
      if (res.dmt['0'].length > 0) {
        res.dmt['0'].forEach((item: any) => {
          item.name = '图片'
        })
        processList.value.push(res.dmt['0'][0])
        allList.value.imgList = res.dmt['0']
        allList.value.imgList = res.dmt['0']
      }
      currentList.value = [...allList.value.sxjList, ...new Array(2).fill({})].slice(0, 2)
      if (res.dmt['1'].length > 0) {
        res.dmt['1'].forEach((item: any) => {
          item.name = '视频'
        })
        processList.value.push(res.dmt['1'][0])
        allList.value.videoList = res.dmt['1']
      }
      currentList.value = [...allList.value.videoList, ...new Array(2).fill({})].slice(0, 2)
    }
  })
}
const chooseList = (item: any) => {
  switch (item.name) {
    case '直播':
      currentList.value = [...allList.value.sxjList, ...new Array(2).fill({})].slice(0, 2)
      break
    case '图片':
      currentList.value = [...allList.value.imgList, ...new Array(2).fill({})].slice(0, 2)
      break
    case '视频':
      currentList.value = [...allList.value.videoList, ...new Array(2).fill({})].slice(0, 2)
      break
  }
}
// 监听警情ID
const jqId = computed(() => {
  return store.jqInfo.id
})
watch(
  jqId,
  (newVal, oldVal) => {
    getList(newVal)
  },
  { immediate: true }
)
const handleCall = () => {
  currentShow.value = !currentShow.value
}
</script>
<style lang="less" scoped>
.pop-line {
  position: relative;
  height: 1px;
  background: rgba(0, 255, 222, 0.3);
  box-shadow: 0px 0px 3px 1px rgba(0, 194, 252, 0.3);
}

.pop-line:before {
  content: '';
  width: 10px;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0px;
  background: rgba(0, 255, 222, 0.7);
  border-radius: 0.5px;
}

.pop-line:after {
  content: '';
  width: 10px;
  height: 2px;
  position: absolute;
  right: 0;
  bottom: 0px;
  background: rgba(0, 255, 222, 0.7);
  border-radius: 0.5px;
}

#videoContainer {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 9;
  padding: 0px;
  margin: 0px;
  width: 970px;
  height: 1030px;
  padding: 10px;
  // background-color: rgba(0, 0, 0, 0.5);
  margin-top: 28px;
}

.top {
  position: relative;
  padding-bottom: 10px;
  width: 100%;
  height: 520px;
  background-color: rgba(0, 0, 0, 0.3);
}

.top-call {
  position: relative;
  padding-bottom: 10px;
  width: 100%;
  height: 520px;
}

.bottom {
  width: 100%;
  height: 240px;
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.5);

  .listBox {
    width: 100%;
    height: 260px;
    display: flex;
    overflow-x: auto;

    // iframe {
    //   width: 100%;
    //   height: 220px;
    // }

    img {
      width: 100%;
      height: 220px;
      object-fit: contain;
    }

    video {
      width: 100%;
      height: 220px;
    }
  }
}

.title-top {
  position: absolute;
  z-index: 1;
  width: 98%;
  height: 50px;
  background: linear-gradient(90deg, rgba(10, 25, 50, 0.54), rgba(3, 40, 53, 0.29));
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #ffffff;
}

.title-bottom {
  padding: 0 10px;
  width: 96% !important;
  position: absolute;
  z-index: 1;
  width: 460px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
}

.shortVideos {
  // margin: 10px 0;
  padding: 10px;
  margin-bottom: 10px;
  height: 140px;
  background-color: rgba(0, 0, 0, 0.5);

  .processBox {
    width: 970px !important;
    height: 120px !important;
    overflow-x: auto;
    // padding: 10px;
    display: flex;
    justify-content: flex-start;
    text-align: center;
  }

  .callBox {
    width: 190px !important;
    height: 120px !important;
    flex-shrink: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    display: grid;
    place-items: center;
    // background: url(@/assets/image/yingda.png) no-repeat;
    background: linear-gradient(90deg, rgba(3, 40, 53, 0.1), rgba(10, 25, 50, 0.9));

    &:hover {
      color: aqua;
    }
  }

  .processList {
    width: 250px;
    height: 120px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: bolder;
    margin-right: 5px;
    background: url(@/assets/image/minVideoBg.png);

    .title {
      margin: auto;
      writing-mode: vertical-lr;
      color: #ffffff;
    }

    img {
      object-fit: contain;
      width: 200px;
      height: 100px;
    }

    iframe {
      width: 200px;
      height: 100px;
    }

    video {
      width: 200px;
      height: 100px;
    }
  }
}
</style>
